<template>
	<view class="center">
		<view class="logo" :hover-class="!login ? 'logo-hover' : ''" style="position: relative;">
			<!-- <view style="position: absolute;right: 40upx;top: 150upx;">
				<text class="cuIcon-settingsfill" style="font-size: 50upx;"></text>
			</view> -->
			<view class="userName">
				<block v-if="login">
					<image class="logo-img" :src="userinfo.userUrl"></image>
				</block>
				<block v-else>
					<view class="logo-img" style="overflow: hidden;">
						<open-data type="userAvatarUrl" class="logo-img"></open-data>
					</view>
				</block>
				<view class="logo-title flex">
					<text class="uer-name">Hi，{{login ? userinfo.userName||'' : '您未登录'}}</text>
				</view>
				<block v-if="!login">
					<button class="login-btn" open-type="getUserInfo" @getuserinfo.stop="getUserInfo">授权登录</button>
				</block>
			</view>
			<view class="userInfo" v-if="login">
				<view class="userid">
					ID：{{userinfo.userId||''}}
				</view>
			</view>
		</view>
		<block v-if="login">
			<view class="cu-list menu sm-border">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-recharge text-grey"></text>
						<text class="text-grey">积分:<text class="redMon">{{userinfo.beginMoney}}</text></text>
					</view>
					<view class="action">
						<button class="cu-btn round bg-green shadow" @click="goDeposit">
							</text>充值</button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	let that;
	export default {
		components: {

		},
		data() {
			return {
				login: false,
				Token: '',
				userinfo: {}
			}
		},
		methods: {
			wxLoginStep(code) {
				this.$api.login({
					code
				}).then(res => {
					if (res.code) {
						that.Token = res.data.Token;
					} else {
						this.$comm.errorToShow("获取openID异常", function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			getUserInfo(res) {
				if (!this.Token) {
					uni.showToast({
						icon: 'none',
						title: '正在加载中，稍等一下',
						duration: 2000
					});
					return
				}
				if (res.detail.errMsg == 'getUserInfo:fail auth deny') {
					that.$comm.errorToShow('授权失败')
				} else {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							infoRes.userInfo.Token = that.Token;
							that.toWxLogin(infoRes.userInfo)
						}
					});
				}
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.upinfoLogin(data).then(res => {
					if (res.code) {
						_this.$comm.successToShow("登录成功", () => {
							_this.login = true;
							_this.userinfo = res.data[0];
							_this.$store.dispatch('setUserInfoAction', res.data[0])
							_this.$store.dispatch('saveUserTokenAction', _this.Token)
						})
					} else {
						_this.$comm.errorToShow('登录失败，请重试')
					}
				})
			},
			initUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						that.$api.userInfoInit(infoRes.userInfo).then(res => {
							if (res.code) {
								that.userinfo = res.data[0];
								that.$store.dispatch('setUserInfoAction', that.userinfo)
							} else {
								that.$comm.errorToShow('更新信息失败，请重试')
							}
						})
					},
					fail(res) {
						that.login = false
						uni.login({
							success(res) {
								if (res.code) {
									that.wxLoginStep(res.code)
								} else {
									that.$comm.errorToShow('未取得code')
								}
							},
							fail() {
								that.$comm.errorToShow('获取code失败')
							}
						})
					}
				});
			},
			goDeposit(){
				this.$comm.navigateTo('/pages/deposit/deposit')
			}
		},
		onLoad() {
			that = this;
			if (this.$db.get('token')) {
				this.login = true
			} else {
				uni.login({
					success(res) {
						if (res.code) {
							that.wxLoginStep(res.code)
						} else {
							that.$comm.errorToShow('未取得code')
						}
					},
					fail() {
						that.$comm.errorToShow('获取code失败')
					}
				})
			}
		},
		onShow() {
			this.login && this.initUserInfo()
		}
	}
</script>

<style scoped lang="scss">
	.center {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	.logo {
		width: 750upx;
		height: 450upx;
		padding: 20upx;
		padding-left: 40upx;
		/* 		padding-top: 200upx; */
		box-sizing: border-box;
		background-color: #42BD56;

		.userName {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 150upx;
		}

		.userInfo {
			margin-top: 24upx;
			color: #FFFFFF;
			padding-left: 20upx;

			.userid {
				height: 38upx;
				width: 170upx;
				line-height: 38upx;
				opacity: 0.9;
				border-radius: 8upx;
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}

			.sex {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				line-height: 30upx;
			}
		}
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		/* background: #ff7159; */
		background-color: transparent;
		border: 2upx solid #fff;
		font-size: 12px;
	}

	.cu-list.menu>.cu-item {
		background-color: rgba(66, 66, 66, 0.01);
		border: 1upx solid #EEEEEE;
		height: 130upx;
	}

	.redMon {
		color: red;
		font-size: 38rpx;
		margin-left: 10rpx;
	}
</style>
